<template>
	<view class="index auto pb32" @click="handerClcik(props.data)">
		<!-- 头部 -->
		<view class="header dflex alc pl28 pr34 jcsb">
			<view>{{ props.data.title }}</view>
			<view class="textc white fs28">已认购</view>
		</view>
		<!-- 产品规模部分 -->
		<view class="dflex pl34 pr34 jcsb mt34">
			<view class="dflex fs28">
				<view style="color: #85878E;">认购金额：</view>
				<view class="fw600" style="color: #FF6551;">
					{{ props.data.money }}
				</view>
			</view>
			<view class="dflex fs28">
				<view style="color: #85878E;">产品期限：</view>
				<view style="color: #000A1F;">{{ props.data.zq }}</view>
			</view>
		</view>
		<!-- 收益率 -->
		<view class="dflex pl34 pr34 mt28 fs28">
			<view style="color: #85878E;">年化预期收益率：</view>
			<view style="color: #000A1F;">{{ props.data.syl  }}</view>
		</view>
		<!-- 线条 -->
		<view class="mt30"><Lines :width="622"></Lines></view>
		<!-- 内容 -->
		<view class="text auto mt22">{{ props.data.desc }}</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
	data: {
		type: Object,
		default: {}
	}
});
const emits = defineEmits(['handerDtrails']);
let handerClcik = item => {
	emits('handerDtrails', item.order_id);
};
</script>

<style lang="scss" scoped>
.index {
	width: 690rpx;
	background: #fff;
	border-radius: 30rpx;
	.header {
		width: 690rpx;
		height: 97rpx;
		background: #fff9f6;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		& > view:nth-child(1) {
			width: 461rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #5e2a11;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		& > view:nth-child(2) {
			width: 112rpx;
			height: 48rpx;
			background: linear-gradient(360deg, #3eb176 0%, #63be5a 100%);
			border-radius: 27rpx 0rpx 27rpx 0rpx;
			line-height: 48rpx;
		}
	}
}
.text {
	width: 622rpx;
  padding-bottom: 10rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #494a4f;
	line-height: 56rpx;
}
</style>
